<template>
  <el-dialog
    :title="!dataForm.id ? '新增主题组件' : '修改主题组件'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    append-to-body
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="100px"
    >
      <el-row>
        <el-col :span="10">
          <el-form-item label="主题名称" prop="themeName">
            <el-select
              v-model="dataForm.themeId"
              filterable
              placeholder="请选择主题"
              size="medium"
              @change="onSelectTheme"
            >
              <el-option
                v-for="item in themeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="组件分类" prop="classifyId">
            <el-select
              v-model="dataForm.classifyId"
              filterable
              placeholder="请选择分类"
              size="medium"
              @change="onSelectClassify"
            >
              <el-option
                v-for="item in itemsCatList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="10">
          <el-form-item label="组件类型" prop="typeId">
            <el-select
              v-model="dataForm.typeId"
              filterable
              placeholder="请选择组件类型"
              size="medium"
              @change="onSelectTypeify"
            >
              <el-option
                v-for="item in widgetTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row>
        <el-col :span="10">
          <el-form-item
            label="天气情况"
            prop="singulars"
            v-if="dataForm.typeId === 8 || dataForm.typeId === 12"
          >
            <el-radio v-model="dataForm.singulars" label="1">当日天气</el-radio>
            <el-radio v-model="dataForm.singulars" label="2">多日天气</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="组件尺寸" prop="widgetSize">
            <el-select
              v-model="dataForm.widgetSize"
              filterable
              placeholder="请选择组件尺寸"
              size="medium"
              @change="onSelectWidgetSize"
            >
              <el-option
                v-for="item in widgetSizeList"
                :key="item.val"
                :label="item.name"
                :value="item.val"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="组件图:" prop="image">
            <div class="myhead">
              <el-tooltip content="组件图" placement="top">
                <el-image
                  style="width: 90px; height: 60px"
                  :src="
                    dataForm.image + '?x-oss-process=image/resize,h_100,w_100'
                  "
                  fit="contain"
                  @click="uploadImageHandle()"
                  alt=""
                />
              </el-tooltip>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="预览图:" prop="preview">
            <div class="myhead">
              <el-tooltip content="预览图" placement="top">
                <el-image
                  style="width: 90px; height: 60px"
                  :src="
                    dataForm.preview + '?x-oss-process=image/resize,h_100,w_100'
                  "
                  fit="contain"
                  @click="uploadPreviewHandle()"
                  alt=""
                />
              </el-tooltip>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="是否上架:" prop="status">
            <el-select
              v-model="dataForm.status"
              filterable
              placeholder="请选择是否上架"
              size="medium"
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="是否免费:" prop="free">
            <el-select
              v-model="dataForm.free"
              filterable
              placeholder="请选择是否免费"
              size="medium"
            >
              <el-option
                v-for="item in freeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="15">
          <el-form-item label="是否热门:" prop="hot">
            <el-select
              v-model="dataForm.hot"
              filterable
              placeholder="请选择是否热门"
              size="medium"
            >
              <el-option
                v-for="item in hotList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="15">
          <el-form-item label="是否最新:" prop="newest">
            <el-select
              v-model="dataForm.newest"
              filterable
              placeholder="请选择是否最新"
              size="medium"
            >
              <el-option
                v-for="item in newestList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="组件描述:" prop="describes">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 3 }"
              placeholder="组件描述"
              v-model="dataForm.describes"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="dataForm.classifyId === 3 || dataForm.classifyId === 13">
        <el-col :span="15">
          <el-form-item label="上传天气图:" prop="upload">
            <div class="myhead">
              <el-tooltip content="点击上传" placement="top">
                <el-image
                  style="width: 90px; height: 60px"
                  :src="dataForm.upload"
                  fit="contain"
                  @click="uploadImagesHandle"
                  alt=""
                />
              </el-tooltip>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="dataForm.classifyId === 3 || dataForm.classifyId === 13">
        <el-col :span="15">
          <el-form-item label="天气图展示:" prop="images">
            <div
              class="demo-image"
              v-for="(item, index) in dataForm.weatherImages"
              :key="index"
            >
              <el-image
                style="width: 50px; height: 100px"
                :src="item"
                fit="contain"
              ></el-image>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
         <!-- <el-row v-if="dataForm.typeId === 8 || dataForm.typeId === 12">
        <el-col :span="15">
          <el-form-item label="上传天气图:" prop="upload">
            <div class="myhead">
              <el-tooltip content="点击上传" placement="top">
                <el-image
                  style="width: 90px; height: 60px"
                  :src="dataForm.upload"
                  fit="contain"
                  @click="uploadImagesHandle"
                  alt=""
                />
              </el-tooltip>
            </div>
          </el-form-item>
        </el-col>
      </el-row> -->

      <!-- <el-row v-if="dataForm.typeId === 8 || dataForm.typeId === 12">
        <el-col :span="15">
          <el-form-item label="天气图展示:" prop="images">
            <div
              class="demo-image"
              v-for="(item, index) in dataForm.weatherImages"
              :key="index"
            >
              <el-image
                style="width: 50px; height: 100px"
                :src="item"
                fit="contain"
              ></el-image>
            </div>
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>

    <!-- 弹窗, 上传组件图 -->
    <theme-upload-image
      v-if="uploadImageVisible"
      ref="themeUploadImage"
      @refreshDataList="refreshUploadImage"
    ></theme-upload-image>

    <!-- 弹窗, 上传组件预览图 -->
    <theme-upload-preview
      v-if="uploadPreviewVisible"
      ref="themeUploadPreview"
      @refreshDataList="refreshUploadPreview"
    ></theme-upload-preview>

    <!-- 弹窗, 上传组件图 -->
    <widge-upload-images
      v-if="uploadImagesVisible"
      ref="widgeUploadImages"
      @refreshDataList="refreshUploadImages"
    ></widge-upload-images>
  </el-dialog>
</template>

<script>
import "babel-polyfill";
import ThemeUploadImage from "./widge-upload-image";
import ThemeUploadPreview from "./widge-upload-image";
import WidgeUploadImages from "./widge-upload-images";

export default {
  data() {
    return {
      visible: false,
      statusList: [
        {
          value: 1,
          name: "是"
        },
        {
          value: 2,
          name: "否"
        }
      ],
      freeList: [
        {
          value: 1,
          name: "免费"
        },
        {
          value: 2,
          name: "VIP+视频"
        },
        {
          value: 3,
          name: "仅VIP"
        },
        {
          value: 4,
          name: "仅视频"
        }
      ],
      hotList: [
        {
          value: 1,
          name: "是"
        },
        {
          value: 2,
          name: "否"
        }
      ],
      newestList: [
        {
          value: 1,
          name: "是"
        },
        {
          value: 2,
          name: "否"
        }
      ],
      uploadImageVisible: false,
      uploadPreviewVisible: false,
      uploadImagesVisible: false,
      dataForm: {
        id: 0,
        themeId: "",
        themeName: "",
        name: "",
        classifyId: "",
        classifyName: "",
        typeId: "12",
        typeName: "复合组件",
        singulars: "1",
        widgetSize: "",
        free: 1,
        hot: 2,
        newest: 2,
        status: 2,
        describes: "",
        image: "http://file-cdn-theme.cykonhy.com/default/default.jpg",
        preview: "http://file-cdn-theme.cykonhy.com/default/default.jpg",
        weatherImages: [],
        upload: "http://file-cdn-theme.cykonhy.com/default/upload_icon.png" //不用上传和提交
      },
      dataRule: {
        themeId: [
          { required: true, message: "主题id不能为空", trigger: "blur" }
        ],
        themeName: [
          { required: true, message: "主题名称不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "组件名称不能为空", trigger: "blur" }
        ],
        classifyId: [
          { required: true, message: "组件分类不能为空", trigger: "blur" }
        ],
        typeId: [
          { required: true, message: "组件类型不能为空", trigger: "blur" }
        ],
        widgetSize: [
          {
            required: true,
            message: "尺寸: 小中大组件small，medium，larege不能为空",
            trigger: "blur"
          }
        ],
        image: [{ required: true, message: "组件图不能为空", trigger: "blur" }],
        preview: [
          { required: true, message: "预览图不能为空", trigger: "blur" }
        ],
        free: [
          { required: true, message: "是否免费不能为空", trigger: "blur" }
        ],
        status: [{ required: true, message: "状态不能为空", trigger: "blur" }]
      },
      themeList: [],
      itemsCatList: [],
      widgetSizeList: [
        {
          id: 1,
          val: "small",
          name: "小组件"
        },
        {
          id: 2,
          val: "medium",
          name: "中组件"
        },
        {
          id: 3,
          val: "larege",
          name: "大组件"
        }
      ],
      widgetTypeList: [
        {
          id: 1,
          name: "时间组件"
        },
        {
          id: 2,
          name: "照片组件"
        }
      ]
    };
  },
  components: {
    ThemeUploadImage,
    ThemeUploadPreview,
    WidgeUploadImages
  },
  methods: {
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/widge/widge/info/${this.dataForm.id}`),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.themeId = data.widge.themeId;
              this.dataForm.themeName = data.widge.themeName;
              this.dataForm.name = data.widge.name;
              this.dataForm.widgetSize = data.widge.widgetSize;
              this.dataForm.classifyId = data.widge.classifyId;
              this.dataForm.classifyName = data.widge.classifyName;
              this.dataForm.typeId = data.widge.typeId;
              this.dataForm.typeName = data.widge.typeName;
              this.dataForm.singulars = data.widge.singulars + "";
              this.dataForm.image = data.widge.image;
              this.dataForm.preview = data.widge.preview;
              this.dataForm.free = data.widge.free;
              this.dataForm.hot = data.widge.hot;
              this.dataForm.newest = data.widge.newest;
              this.dataForm.describes = data.widge.describes;
              this.dataForm.status = data.widge.status;
              this.dataForm.weatherImages = data.widge.weatherImages;
            }
          });
        } else {
          this.dataForm.themeId = "";
          this.dataForm.themeName = "";
        }
      });
      this.initThemeList();
      this.initWidgeTypeList();
      this.initWidgeClassifyList();
    },
    initThemeList() {
      this.$http({
        url: this.$http.adornUrl("/theme/theme-list/list"),
        method: "get",
        params: this.$http.adornParams({
          page: 1,
          limit: 10000
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.themeList = data.page.list;
        }
      });
    },
    initWidgeTypeList() {
      this.$http({
        url: this.$http.adornUrl("/widge/widge-type/list"),
        method: "get",
        params: this.$http.adornParams({
          page: 1,
          limit: 10000
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.widgetTypeList = data.page.list;
        }
      });
    },
    initWidgeClassifyList() {
      this.$http({
        url: this.$http.adornUrl("/widge/widge-classify/list"),
        method: "get",
        params: this.$http.adornParams({
          page: 1,
          limit: 10000
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.itemsCatList = data.page.list;
        }
      });
    },
    // 筛选类型
    onSelectTheme(val) {
      let theme = null;
      this.themeList.forEach((item, index) => {
        if (item.id === val) {
          theme = item;
        }
      });
      this.dataForm.themeId = theme.id;
      this.dataForm.themeName = theme.name;
    },
    // 筛选分类
    onSelectClassify(val) {
      let obj = this.itemsCatList.find(item => {
        return item.id === val;
      });
      this.dataForm.classifyName = obj.name;
    },
    // 筛选类型
    onSelectTypeify(val) {
      let obj = this.widgetTypeList.find(item => {
        return item.id === val;
      });
      this.dataForm.typeName = obj.name;
    },
    // 筛选尺寸
    onSelectWidgetSize(val) {
      let widgetSize = null;
      this.widgetSizeList.forEach((item, index) => {
        if (item.val === val) {
          widgetSize = item;
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/widge/widge/${!this.dataForm.id ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              themeId: this.dataForm.themeId,
              themeName: this.dataForm.themeName,
              name: this.dataForm.themeName,
              widgetSize: this.dataForm.widgetSize,
              classifyId: this.dataForm.classifyId,
              classifyName: this.dataForm.classifyName,
              typeId: this.dataForm.typeId,
              typeName: this.dataForm.typeName,
              singulars: this.dataForm.singulars,
              image: this.dataForm.image,
              preview: this.dataForm.preview,
              free: this.dataForm.free,
              hot: this.dataForm.hot,
              newest: this.dataForm.newest,
              describes: this.dataForm.describes,
              status: this.dataForm.status,
              weatherImages: this.dataForm.weatherImages
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    // 上传组件图
    uploadImageHandle() {
      this.uploadImageVisible = true;
      this.$nextTick(() => {
        this.$refs.themeUploadImage.init();
      });
    },
    refreshUploadImage(filePath) {
      if (filePath != "") {
        this.dataForm.image = filePath;
      }
      this.uploadImageVisible = false;
    },
    // 上传组件图
    uploadPreviewHandle() {
      this.uploadPreviewVisible = true;
      this.$nextTick(() => {
        this.$refs.themeUploadPreview.init();
      });
    },
    refreshUploadPreview(filePath) {
      if (filePath != "") {
        this.dataForm.preview = filePath;
      }
      this.uploadPreviewVisible = false;
    },
    // 上传组件图
    uploadImagesHandle() {
      this.uploadImagesVisible = true;
      this.$nextTick(() => {
        this.$refs.widgeUploadImages.init();
      });
    },

    refreshUploadImages(images) {
      if (images != null && images.length > 0) {
        this.dataForm.weatherImages = images;
      }
      this.uploadImagesVisible = false;
    }
  }
};
</script>
